<template>
	<div class="content" v-loading="mainLoading">
		<h2><i class="iconfont icon-activity_add"></i>
			<span v-if="advert.adv_id">修改广告</span>
			<span v-else>添加广告</span>	
		</h2>
		<div class="content-wrap">
			<!--填写广告标题-->
			<div class="ct-list">
				<div class="ct-list__title">广告标题</div>
				<div class="ct-list__field">
					<el-input size="small" v-model="advert.adv_title"></el-input>
				</div>
			</div>
			<!--选择活动开始和结束的日期-->
			<div class="ct-list">
				<div class="ct-list__title">开始和结束时间选择</div>
				<div class="ct-list__field">
					<el-date-picker
					    v-model="advert.adv_times"
					    type="daterange"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期">
				    </el-date-picker>
				</div>
			</div>
			<!--上传活动图片-->
			<div class="ct-list upload-pic clearfix">
				<div class="ct-list__title">上传广告图片</div>
				<s-upload-pictrue :limit="1" :size="5" :fileList="main_imgs" @getImgIds="handleImgMain"></s-upload-pictrue>
				<div class="ct-list__tip fl">
					<div>1.轮播图广告大小建议为1590*585</div>
					<div>2.中间部分广告图片大小为518*337</div>
					<div>3.图片格式限制为jpg，jpeg和png</div>
					<div>4.图片大小限制为2M</div>
					<div>5.只允许上传一张图片</div>
				</div>
			</div>
			<!--广告放置位置-->
			<div class="ct-list">
				<div class="ct-list__title">广告放置位置</div>
				<el-select v-model="advert.adv_loc">
					<el-option label="上面轮播图广告" :value="1"></el-option>
					<el-option label="首页中间广告" :value="2"></el-option>
				</el-select>
			</div>
			<!--广告类型-->
			<div class="ct-list">
				<div class="ct-list__title">广告类型</div>
				<el-select v-model="advert.advertType" @change="handleAdvType">
					<el-option label="商品广告" :value="1"></el-option>
					<el-option label="静态页面广告" :value="2"></el-option>
				</el-select>
			</div>
			<!--静态页面广告-->
			<div class="ct-list" v-if="advert.advertType === 2">
				<div class="ct-list__title">静态页面广告url</div>
				<el-input v-model="advert.advertUrl"></el-input>
			</div>
			<!--选择参加活动的商品-->
			<div class="ct-list" v-if="advert.advertType === 1">
				<div class="ct-list__title">选择参加广告的商品</div>
				<s-wait-goods-upload :limit="1"></s-wait-goods-upload>
			</div>
			<!--提交活动-->
			<div class="submit">
				<el-button type="primary" @click="addAdvert">
					<span v-if="advert.adv_id">确认修改</span>
					<span v-else>确认添加</span>
				</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	import uploadPicture from "../../../components/upload_picture/upload_picture.vue"
	import waitGoodsUpload from "../../../components/wait_goods_upload/wait_goods_upload.vue"
	export default {
		components: {
			"s-upload-pictrue": uploadPicture,
			sWaitGoodsUpload: waitGoodsUpload
		},
		beforeRouteLeave(to, from, next) {
			this.$store.commit("saveGoods/clear");//离开添加广告页面的时候清除store里面的数据
			next();
		},
		data() {
			return {
				//========广告基本信息========//
				advert: {
					advertUrl: "",						//广告url
					adv_title: "",						//活动名称
					adv_times: [],						//活动开始和结束的日期
					main_img_id: "",						//图片id
					advertType: 2,						//广告类型
					adv_loc: 1 							//广告上传位置(1代表 顶部轮播图， 2代表首页中间)
				},
				main_imgs: [],
				//========其他参数========//
				loading: true, 													//加载小圆圈触发变量
				mainLoading: false,												//提交活动以后的小圆圈
			};
		},
		created() {
			if(this.$route.query.id) {
				this.advert.adv_id = this.$route.query.id; 
				this.loadData();
			}
		},
		methods: {
			handleImgMain(ids) {
				this.advert.main_img_id = ids;
			},
			loadData() {
				var url = `${this.url}/adv/adv_get_detail.action`;
				var params = {
					adv_id: this.advert.adv_id
				}
				this.$http.get(url, { params }).then((res)=>{
					if (res.data.success) {
						var r = res.data.result;
						this.advert.adv_title = r.adv_title;
						this.advert.adv_times.push(new Date(r.start_time));
						this.advert.adv_times.push(new Date(r.end_time));
						if(r.mainimg) {
							this.advert.main_img_id = r.mainimg.image_resource_id;
							this.main_imgs = [{
								name: '',
								url: r.mainimg.thump + "400"
							}];
						}
						this.advert.advType = r.adv_type;
						this.advert.advertUrl = r.adv_html;
						//存在商品的时候将商品表示为已选中
						if (r.commodity) {
							this.$store.commit({
								type: "saveGoods/set",
								commodity_id: r.commodity.commodity_id,
								commodity_no: r.commodity.commodity_no,
								commodity_name: r.commodity.commodity_name,
								status: 1,
							});
							this.flag = 1;
						}
					}else {
						this.$message({
							type: "warning",
							message: res.data.result.errmsg
						});
					}
				});
			},
			addAdvert() {
				if( this.advert.adv_times.length === 0 ) {
					this.$message({
						message: "请选择活动时间",
						type: "warning"
					});
					return;
				}else if( this.advert.adv_title.trim().length === 0 ) {
					this.$message({
						message: "请填写商品名称",
						type: "warning"
					});
					return;
				}else if ( !this.advert.main_img_id ) {
					this.$message({
						message: "请上传至少一张图片",
						type: "warning"
					});
					return;
				}else if ( !this.$store.getters["saveGoods/validGoods"] && !this.advert.advertUrl) {
					this.$message({
						message: "请至少上传一个商品或者一个广告url",
						type: "warning"
					});
					return;
				}
				var params = {
					adv_id: this.advert.adv_id,
					adv_title: this.advert.adv_title,
					start_time: this.advert.adv_times[0].getTime(),
					end_time: this.advert.adv_times[1].getTime(),
					commodity_id: this.$store.getters["saveGoods/validGoods"],
					main_img_id: this.advert.main_img_id,
					adv_html: this.advert.advertUrl,
					adv_loc: this.advert.adv_loc
				};
				this.mainLoading = true;
				var url;
				var tip;
				if(params.adv_id) {
					url = `${this.url}/adv/adv_update.action`;
					tip = "修改成功";
				} else {
					url = `${this.url}/adv/adv_create.action`;
					tip = "添加成功";
				}
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.$message({
							type: "success",
							message: tip
						});
						this.mainLoading = false;
						this.clearAll();
						this.$router.push("/admin/all_advert");
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			//==================================其他==================================//
			/*广告类型切换时改变状态*/
			handleAdvType() {
				this.$store.commit("saveGoods/clear");
				this.advert.advertUrl = "";
			},
			//======================================重置为初始状态=========================================//
			clearAll(){
				this.$store.commit("saveGoods/clear");
				this.$refs["uploadActivePic"].clearFiles();
				this.flag = 0;									//flag为0代表可以继续天剑商品，为1表示不能再添加商品
				this.advert.adv_title = "";						//活动名称
				this.advert.adv_times = [];						//活动开始和结束的日期
				this.advert.main_img_id = "";						//图片id
				this.advert.adv_loc = 1; 						//广告上传位置(1代表 顶部轮播图， 2代表首页中间)
				this.advert.advertUrl = "";
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*每一项的基本信息填写*/
	.ct-list__title {
		color: #008489;
		font-size: 16px;
		margin: 1rem 0;
	}
	.ct-list__field {
		width: 100%;
	}
	.ct-list__tip {
		margin-left: 10px;
		height: 148px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #888;
		font-size: 12px;
	}
	/*提交按钮*/
	.submit {
		text-align: center;
		margin-top: 4rem;
	}
</style>
